.txn {
    height: 100%;
    border-top: .2667vw solid var(--main-split);

    .txn_wrap {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 2.1333vw 0 0;
        overflow: hidden;

        .info {
            margin: 0 var(--m12);
            min-height: 33.0667vw;
            padding: 4.5333vw var(--m12);
            background-color: var(--input-bg);
            backdrop-filter: blur(17.5PX);
            border: .2667vw solid var(--input-border);
            border-radius: 4.2667vw;
            position: relative;
            z-index: 1;

            .head {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 4vw;

                position: relative;

                &::after {
                    position: absolute;
                    bottom: 0;
                    content: '';
                    display: block;
                    width: 100%;
                    height: 1PX;
                    background-color: var(--menu-split);
                    transform: scaleY(0.5);
                }


                .title {
                    font-family: 'Montserrat-Regular';
                    font-style: normal;
                    font-weight: 500;
                    font-size: 4vw;

                    color: var(--font-color);
                }

                .coin {
                    display: flex;
                    align-items: center;
                    font-family: 'Montserrat-Regular';
                    font-style: normal;
                    font-weight: 600;
                    font-size: 3.7333vw;
                    cursor: pointer;
                    /* identical to box height */

                    display: flex;
                    align-items: center;

                    /* Black */

                    color: var(--font-color);

                    img {
                        display: block;
                    }

                    .drop_icon {
                        width: 4.2667vw;
                        height: 4.2667vw;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        img {
                            width: 2.824vw;
                        }
                    }
                }
            }

            .amount {
                margin-top: 3.8667vw;
                display: flex;
                align-items: center;

                .amount_icon {
                    background-color: var(--icon-bg);
                    margin-right: 2.1333vw;
                    border-radius: 50%;
                }

                span {
                    font-family: 'Montserrat-Bold';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 6.4vw;

                    /* Black */

                    color: var(--main-text);
                }

                img {
                    display: block;
                    width: 6.4vw;
                }
            }

            .estimated {
                font-family: 'Montserrat-Bold';
                font-style: normal;
                font-weight: 500;
                font-size: 2.6667vw;
                margin-top: 1.0667vw;
                /* 淡灰 */

                color: var(--secondary-middle-text);

            }
        }


        .history {
            margin-top: 2.1333vw;
            flex: 1;

            .history_wrap {
                height: 100%;
                max-height: 69.3333vw;
                overflow-y: scroll;

                .history_scroller {

                    .history_list {
                        .item {
                            background-color: var(--input-bg);
                            position: relative;
                            padding: 3.4667vw var(--m12);
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            cursor: pointer;

                            .t {
                                max-width: 40vw;
                                display: flex;
                                align-items: center;
                                font-family: 'Montserrat-Bold';
                                font-style: normal;
                                font-weight: 700;
                                font-size: 4.5333vw;
                                /* identical to box height */

                                &>span {
                                    white-space: nowrap;
                                }

                                /* 深黑 */

                                color: var(--main-text);

                                .unit {
                                    font-weight: 500;
                                    font-size: 2.6667vw;
                                    margin-left: 1.0667vw;
                                    margin-top: 1.2vw;
                                }
                            }

                            .status {
                                .time {
                                    font-style: normal;
                                    font-weight: 400;
                                    font-size: var(--m12);
                                    color: var(--secondary-middle-text);
                                }

                                .s {
                                    position: absolute;
                                    right: var(--m12);
                                    bottom: 1.3333vw;
                                    font-style: normal;
                                    font-weight: 600;
                                    font-size: 2.4vw;
                                }

                                .fail {
                                    color: var(--error) !important;
                                }

                                .success {
                                    color: var(--success) !important;
                                }

                                .padding {
                                    color: var(--padding) !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.empty {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-weight: 500;
    font-size: 2.9333vw;
    transform: translateY(-20%);
    /* or 127% */

    display: flex;
    align-items: center;
    text-align: center;

    /* 淡灰 */

    color: var(--secondary-middle-text);
}


.menu {
    padding: 0;
    z-index: 10;
    position: absolute;
    background-color: var(--qr-bg);
    box-shadow: 0px 0px 2.1333vw rgba(0, 0, 0, 0.16);
    border-radius: 1.0667vw;
    right: 0;
    top: 5.8667vw;
    backdrop-filter: blur(17.5PX);
    max-height: 80vw;
    overflow-y: scroll;
    overflow-x: hidden;

    :global {
        .MuiButtonBase-root {
            padding: 2.1333vw;
            min-height: auto;
        }

        .MuiList-root {
            padding: 0;
        }
    }

    .menu_item {
        :global {
            border-bottom: 1PX solid var(--menu-split);
        }

        &>div {
            display: flex;
            align-items: center;
            width: 23.2vw;

            img {
                width: 4.2667vw;
                margin-right: 1.3333vw;
            }

            span {
                font-family: 'Montserrat-Bold';
                font-style: normal;
                font-weight: 600;
                font-size: 3.7333vw;
                display: flex;
                align-items: center;

                /* 深黑 */

                color: var(--font-color);
            }
        }
    }
}

.trading_details_layout {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


.v_h {
    visibility: hidden !important;
}


@media screen and (min-width:1280px) {
    .txn {
        border-top: 1.2535px solid var(--main-split);
    
        .txn_wrap {
            padding: 10.0265px 0 0;
    
            .info {
                margin: 0 15.04px;
                min-height: 155.4135px;
                padding: 21.3065px 15.04px;
                border: 1.2535px solid var(--input-border);
                border-radius: 20.0535px;
    
                .head {
                    padding-bottom: 18.8px;
    
    
                    .title {
                        font-size: 18.8px;
                    }
    
                    .coin {
                        font-size: 17.5465px;
                        /* identical to box height */
                        .drop_icon {
                            width: 20.0535px;
                            height: 20.0535px;
    
                            img {
                                width: 13.2728px;
                            }
                        }
                    }
                }
    
                .amount {
                    margin-top: 18.1735px;
    
                    .amount_icon {
                        margin-right: 10.0265px;
                    }
    
                    span {
                        font-size: 30.08px;
    
                    }
    
                    img {
                        width: 30.08px;
                    }
                }
    
                .estimated {
                    font-size: 12.5335px;
                    margin-top: 5.0135px;
    
                }
            }
    
    
            .history {
                margin-top: 10.0265px;
    
                .history_wrap {
                    height: 100%;
                    max-height: 325.8665px;
    
                    .history_scroller {
    
                        .history_list {
                            .item {
                                padding: 16.2935px 15.04px;
    
                                .t {
                                    max-width: 188px;
                                    font-size: 21.3065px;
    
                                    .unit {
                                        font-size: 12.5335px;
                                        margin-left: 5.0135px;
                                        margin-top: 5.64px;
                                    }
                                }
    
                                .status {
                                    .time {
                                        font-size: 15.04px;
                                    }
    
                                    .s {
                                        right: 15.04px;
                                        bottom: 6.2665px;
                                        font-size: 11.28px;
                                    }
    
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    .empty {
        font-size: 13.7865px;
    }
    
    
    .menu {
        box-shadow: 0px 0px 10.0265px rgba(0, 0, 0, 0.16);
        border-radius: 5.0135px;
        right: 0;
        top: 27.5735px;
        max-height: 376px;
    
        :global {
            .MuiButtonBase-root {
                padding: 10.0265px;
            }

        }
    
        .menu_item {
            :global {
                border-bottom: 1PX solid var(--menu-split);
            }
    
            &>div {
                width: 109.04px;
    
                img {
                    width: 20.0535px;
                    margin-right: 6.2665px;
                }
    
                span {
                    font-size: 17.5465px;
                }
            }
        }
    }
}